<!--车辆实时信息图-->
<template>
    <div class="com-container">
        <div class="com-chart" ref="stock_ref"></div>
    </div>
</template>

<script>
    import {mapState} from "vuex";
    export default {
        name: "Stock",
        data() {
            return {
                chartInstance:null,
                allData:null,
                currentIndex:0,//当前显示数据的页数
                timerId:null,//定时器标识
            }
        },
        created(){
            //注册回调函数
            this.$socket.registerCallBack("stockData",this.getData);
        },
        mounted(){
            this.initChart();
            //this.getData();
            //发送数据给服务器，告诉服务器，我现在需要数据
            this.$socket.send({
                action:'getData',
                socketType:'stockData',
                chartName:'stock',
                value:''
            });
            window.addEventListener('resize',this.screenAdapter);
            //在页面加载完成之后，主动进行屏幕的适配
            this.screenAdapter();
        },
        destroy(){
            //在组件销毁的时候，将窗口监听器取消掉
            window.removeEventListener('resize',this.screenAdapter);
            clearInterval(this.timerId);
            this.$socket.unRegisterCallBack("stockData")
        },
        methods: {
            //初始化echartInstance对象
            initChart(){
                this.chartInstance=this.echarts.init(this.$refs.stock_ref,this.theme);
                const initOption={
                    title:{
                        text:'┃ 实时车辆信息',
                        left:20,
                        top:20,
                    }
                };
                this.chartInstance.setOption(initOption);
                //设置鼠标移入移出事件
                this.chartInstance.on('mouseover',()=>{
                    clearInterval(this.timerId);
                });
                this.chartInstance.on('mouseout',()=>{
                    this.startInterval();
                });
            },
            //获取服务器数据
            getData(ret){
                /*await this.axios.get("/chart/stock").then(res=>{
                    this.allData=res.data;
                });*/
                this.allData=ret;
                this.updateChart();
            },
            //处理数据
            updateChart(){
                const centerArr = [
                    ['18%', '40%'],
                    ['50%', '40%'],
                    ['82%', '40%'],
                    ['34%', '75%'],
                    ['66%', '75%']
                ];
                const  colorArr=[
                    ['#4FF778', '#0BA82C'],
                    ['#E5DD45', '#E8B11C'],
                    ['#E8821C', '#E55445'],
                    ['#5052EE', '#AB6EE5'],
                    ['#23E5E5', '#2E72BF']
                ];
                const start=this.currentIndex*5;
                const end=(this.currentIndex+1)*5;
                const showData=this.allData.slice(start,end);
                const seriesArr=showData.map((item,index)=>{
                    return {
                        type:'pie',
                        center:centerArr[index],
                        hoverAnimation:false,//关闭鼠标移入变细的效果
                        labelLine:{
                          show:false,//隐藏指市线
                        },
                        label:{
                            position:'center',
                            color:colorArr[index][0],
                        },
                        data:[
                            {
                                name:item.name+'\n\n'+item.model+'\n\n'+item.sales,
                                value:item.sales,
                                itemStyle:{
                                    color:new this.echarts.graphic.LinearGradient(0,1,0,0,[
                                        {
                                            offset:0,
                                            color:colorArr[index][0],
                                        },
                                        {
                                            offset:1,
                                            color:colorArr[index][1],
                                        },
                                    ])
                                }
                            },
                            {
                                value:item.stock,
                                itemStyle:{
                                    color:'#333843'
                                }
                            },
                        ]
                    }
                });
                const dataOption={
                    series:seriesArr
                };
                this.chartInstance.setOption(dataOption);
            },
            //当浏览器的大小发生变化的时候，调用该方法，来完成屏幕的适配
            screenAdapter(){
                const titleFontSize=this.$refs.stock_ref.offsetWidth/100 * 3.6;

                const innerRadius=titleFontSize*2.8;
                const outterRadius=innerRadius*1.125;
                //和分辨率大小相关的配置项
                const adapterOption={
                    title:{
                      textStyle:{
                          fontSize:titleFontSize
                      }
                    },
                    series:[
                        {
                            type:'pie',
                            radius:[outterRadius,innerRadius],
                            label: {
                                fontSize:titleFontSize/2
                            }
                        },
                        {
                            type:'pie',
                            radius:[outterRadius,innerRadius],
                            label: {
                                fontSize:titleFontSize/2
                            }
                        },
                        {
                            type:'pie',
                            radius:[outterRadius,innerRadius],
                            label: {
                                fontSize:titleFontSize/2
                            }
                        },
                        {
                            type:'pie',
                            radius:[outterRadius,innerRadius],
                            label: {
                                fontSize:titleFontSize/2
                            }
                        },
                        {
                            type:'pie',
                            radius:[outterRadius,innerRadius],
                            label: {
                                fontSize:titleFontSize/2
                            }
                        },
                    ],
                };
                this.chartInstance.setOption(adapterOption);
                //手动的调用图表的resize方法
                this.chartInstance.resize();
            },
            startInterval(){
                if (this.timerId) {
                    clearInterval(this.timerId);
                }
                this.timerId=setInterval(()=>{
                  this.currentIndex++;
                  if (this.currentIndex > 1) {
                      this.currentIndex=0
                  }
                  this.updateChart();//在更改完currentIndex之后，需要更新界面
                },5000);
            }
        },
        computed:{
            ...mapState(['theme'])
        },
        watch:{
            theme(){
                //console.log("主题切换");
                this.chartInstance.dispose();//销毁当前图表
                this.initChart();//以切换后的主题显示图表
                this.screenAdapter();//完成屏幕适配
                this.updateChart();//更新图表的展示
            }
        }
    }

</script>

<style scoped>
    .com-container{
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
    }
    .com-chart{
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 20px;
    }
</style>
